<template>
  <div class="GI">

    <!-- 加入购物车的小球   因为小球是 半场动画，所以要用  动画的 钩子函数-->
    <!-- 在 Vue中  如果想 操作 dom元素 就需要  -->
    <transition 
        @befor-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter">
        <div class="shopball" v-show="BallFalge"></div>
    </transition>

    <!-- 商品详情的 轮播图 -->
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
            <swiper :lunbotu="goodsPhoto" :isfull="false"></swiper>
        </div>
      </div>
    </div>


    <!-- 中间商品 的 详细介绍 -->
    <div class="mui-card">
      <div class="mui-card-header">{{goodsPrice.title}}</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
            <div class="price">
                市场价：<del>￥{{goodsPrice.sell_price}}</del>&nbsp;&nbsp;销售价：<span class="newprice">￥{{goodsPrice.market_price}}</span>
            </div>
            <div class="buynum">
                购买数量：<numbox :quantity="quantity" @getCount="getGoodCount"></numbox>
            </div>
            <mt-button type="primary" size="small">立即购买</mt-button>
            <mt-button type="danger" size="small" @click="addShopCartBall">加入购物车</mt-button>
        </div>
      </div>
    </div>

    <!--  商品参数 -->
    <div class="mui-card">
      <div class="mui-card-header">产品参数</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
            <p>商品货号：{{goodsPrice.goods_no}}</p>
            <p>库存情况：{{goodsPrice.stock_quantity}}件</p>
            <p>上架时间：{{goodsPrice.add_time | dateFormat}}</p>
        </div>
        </div>
        <div class="mui-card-footer">
            <mt-button type="primary" size="large" plain @click="goDesc(id)">图文介绍</mt-button>
            <mt-button type="danger" size="large" plain @click="goComments(id)">商品评论</mt-button>
        </div>
    </div>
  </div>
</template>

<script>
import swiper from "./../comments/swiper.vue"
import numbox from "./../comments/numbox.vue"
export default {
    data(){
        return{
            id:this.$route.params.id,
            goodsPhoto:[],    //用于存储  商品  详情  轮播图 的图片
            goodsPrice:{},    //获取商品元素 的详细信息
            quantity:"" ,  // 用于 存储还剩多少件
            BallFalge:false,   //默认  情况下 小球的显示情况
            goodnum:1,         //添加商品的数量 默认是1个
        }
    },
    created(){
        this.getGoodsInfo(),
        this.getGoodsPrice()
    },
    methods: {
        getGoodsInfo(){
            this.$http.get("api/getthumimages/" + this.id).then(result=>{
                if(result.body.status==0){
                    result.body.message.forEach(item=>{
                        item.img = item.src 
                    })
                    this.goodsPhoto = result.body.message
                }
            })
        },
        getGoodsPrice(){
            this.$http.get("api/goods/getinfo/" + this.id).then(result=>{
                if(result.body.status==0){
                    this.goodsPrice = result.body.message[0]
                    this.quantity = result.body.message[0].stock_quantity
                }
            })
        },
        goDesc(id){
            // 这是使用   编程试 导航 跳转到 图文介绍 页面 
            this.$router.push("/tabbar/goodInfo/goDesc/" + this.id)
        },
        goComments(id){
            this.$router.push("/tabbar/goodInfo/goComments/" + this.id )
        },
        addShopCartBall(){
            // 点击 添加购物车按钮 ，显示小球，并且 获取子组件的元素
            this.BallFalge = !this.BallFalge
            // this.$emit("getCartGoodsNum",this.goodnum)
            //  每当  点击加入购物车时，就往全局参数里面增加一个，又因为购物车里不止一种商品，
            // 商品 内容 id , price , goodnum(个数), 商品的默认情况 selected:true
            var goodcar = {
                id:this.id,
                price:this.goodsPrice.sell_price,
                count:this.goodnum,
                selected:true
            }
            this.$store.commit("addGoodsTocar",goodcar)
        },  
        beforeEnter(el){
            el.style.transform="translate(0,0)"
        },
        enter(el,done){
            el.offsetWidth;
            el.style.transform="translate(200px,400px)"
            el.style.transition="all 1s ease"
            done()
        },
        afterEnter(){
            this.BallFalge = !this.BallFalge
        },
        //   获取  子组件的 数据  的函数
        getGoodCount(count){
            this.goodnum = count
        },
    },
    components:{
        swiper,
        numbox
    }
};
</script>

<style lang="less" scoped>
    .GI{
        position: relative;
        .shopball{
            width: 20px;
            height: 20px;
            background-color: red;
            border-radius: 50%;
            position: absolute;
            left: 155px;
            top: 300px;
            z-index: 99;
        }
        background-color: #eee;
        overflow: hidden;
        .mui-card{
        .mui-card-header{
            font-size: 16px;
            font-weight:bold;
        }
        .mui-card-content{
            .price{
                font-size: 14px;
                .newprice{
                    color: red;
                    font-size: 18px;
                }
            }
            .buynum{
                padding: 10px 0;
                font-size: 16px;
            }
        }
    }
    .mui-card-footer{
        button{
            margin-bottom: 20px;
        }
    }
    .mui-card-footer, .mui-card-header{
        display: block;
 }
    }
</style>
